<template>
  <div>
    <div
      class="chart"
      :id="'chart' + bjindex"
      style="width:100%; height:20vh"
    ></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data1: [],
      data2: [],
    }
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      },
    },
    bjindex: {
      type: Number,
      default: 0,
    },
  },
  mounted() {
    this.initChart()
  },
  components: {},

  watch: {},
  methods: {
    initChart() {
      const option = {
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 8000,
            splitNumber: 12,
            itemStyle: {
              color: '#58D9F9',
              shadowColor: 'rgba(0,138,255,0.45)',
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
            // 展示当前进度
            progress: {
              show: true,
              roundCap: true,
              width: 10,
            },
            pointer: {
              icon:
                'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
              length: '75%',
              width: 16,
              offsetCenter: [0, '5%'],
            },
            // 仪表盘轴线相关配置。
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 9,
              },
            },
            // 仪表盘刻度线相关配置。
            axisTick: {
              distance: 10,
              splitNumber: 2,
              lineStyle: {
                width: 2,
                color: '#aaa',
              },
            },
            splitLine: {
              length: 12,
              lineStyle: {
                width: 3,
                color: '#999',
              },
            },
            axisLabel: {
              distance: 10,
              color: '#ff0000',
              fontSize: 8,
            },
            title: {
              show: false,
            },
            detail: {
              // backgroundColor: '#fff',
              borderColor: '#999',
              borderWidth: 0,
              width: '50%',
              lineHeight: 40,
              height: 40,
              borderRadius: 8,
              offsetCenter: [0, '35%'],
              valueAnimation: true,
              formatter: function(value) {
                return '{value|' + value + '} {unit|MIBF}'
                //  return '{value|' + value.toFixed(0) + '}{unit|km/h}'
              },
              rich: {
                value: {
                  fontSize: 12,
                  fontWeight: 'normal',
                  color: '#fff',
                },
                unit: {
                  fontSize: 9,
                  color: '#999',
                  padding: [0, 0, -20, 10],
                },
              },
            },
            data: [
              {
                value: this.data.mtbf,
              },
            ],
          },
        ],
      }
      const chart = document.getElementById('chart' + this.bjindex)
      const myChart = this.$echarts.init(chart)
      myChart.setOption(option)
    },
  },
}
</script>
<style lang="less">
.eq-title {
  position: absolute;
  right: 6%;
  top: 10px;
  color: #ddd;
  p {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .name {
    font-size: 9px;
    width: 60px;
    text-align: right;
  }
  .value {
    flex: 1;
    font-size: 11px;
    color: #1ed3e5;
    padding-left: 5px;
    text-align: left;
  }
}
</style>
